﻿@model ChatApplication.Models.Client
<script language="javascript" type="text/javascript">
    $(function () {
        var chatHubClient = $.connection.chatHub;

        // Send a new message to the server
        $("#SendMessage").click(function () {
            var message = $('#textMessage').val();
            chatHubClient.server.sendMessage(message);
            $('#textMessage').val("");
        });

        // Start the connection
        $.connection.hub.start(function () {
            $("#userName").html($("#userName").html() + '@Model.Name');
            chatHubClient.server.join('@Model.Name');
        });

        // Receive a new message from the server
        chatHubClient.client.newMessage = function (message) {
            message = $("#chatWindow").html() + "<br />" + message;
            $("#chatWindow").html(message);
        };

        chatHubClient.client.leave = function (user, time) {
            message = $("#chatWindow").html() + "<br />" + "user " + user + " left the chat.";
            $("#chatWindow").html(message);
        };


        // Receive the new active userlist
        chatHubClient.client.userList = function (message) {
            message = JSON.parse(message);
            var options;
            $.each(message, function (index) {
                options += '<option value="' + message[index].Name + '">' + message[index].Name + '</option>';
            });
            $("select#users").html(options);
        }
    });
</script>
<div style="position: absolute; left: 0; top: 0; height: 100%; width: 100%">
    
    <h1 id="userName">
        Hi!
    </h1>
    <br />
    <p id="chatWindow" style="position: relative; left: 0; top: -15px; height: 95%; width: 80%;
        background-color: #eeeeee; float: left;">
    </p>
    <select multiple="multiple" id="users" style="float: left; width: 20%; height: 95%;">
    </select>
    <div style="bottom: 0; position: absolute; width: 80%; height: 5%; float: left;">
        <span style="float: left;">Message: </span>
        <input type="text" id="textMessage" style="float: left; height: 80%; width: 90%;
            background-color: #CCCCCC" />
    </div>
    <div style="float: left; width: 20%; height: 5%;">
        <input type="button" id="SendMessage" value="Send" style="width: 100%; height: 100%" />
    </div>
</div>
